<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="Responsive Admin Dashboard Template">
		<meta name="keywords" content="admin,dashboard">
		<meta name="author" content="skcats">
		<!-- The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags -->

		<!-- Title -->
		<title>商品信息</title>

		<!-- Styles -->
		<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link href="assets/plugins/icomoon/style.css" rel="stylesheet">
		<link href="assets/plugins/uniform/css/default.css" rel="stylesheet" />
		<link href="assets/plugins/switchery/switchery.min.css" rel="stylesheet" />
		<link href="css/bootstrap-table.min.css" rel="stylesheet" />
		<!-- Theme Styles -->
		<link href="assets/css/ecaps.min.css" rel="stylesheet">
		<link href="assets/css/custom.css" rel="stylesheet">
	</head>
	<body>
		<!-- Page Inner -->
		<div class="page-inner" style="">
			<!-- 
			<div class="alert alert-default" role="alert">
			    Simple, clean and engaging charts for designers and developers.
			</div> -->
			<div id="main-wrapper">
				<div class="row">
					<div class="col-md-12">
						<div class="panel panel-white">
							<div class="panel-body">
								<div class="table-responsive">
									<label>搜索商品：</label>
									<input id="message" />
									<button type="button" class='btn btn-primary btn-xs btnFindMessage' onclick="findMesage"><i class="fa fa-globe"></i>搜索</button>
									<button type="button" class='btn btn-primary btn-xs btnAdd' style="float: right;" onclick="add()"><i class="fa fa-plus"></i>添加商品</button>

									<table id="example" class="display table" style="width: 100%; cellspacing: 0;">
										<thead>
											<tr>
												<th></th>
												<th>商品标题</th>
												<th>商品价格</th>
												<th>库存</th>
												<th>sku</th>
												<th>管理</th>
											</tr>
										</thead>
									</table>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div><!-- Main Wrapper -->
			<div class="page-footer">

			</div>
		</div><!-- /Page Inner -->
		<!-- Javascripts -->
		<script src="assets/plugins/jquery/jquery-3.1.0.min.js"></script>
		<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
		<script src="assets/plugins/uniform/js/jquery.uniform.standalone.js"></script>
		<script src="js/bootstrap-table.min.js"></script>
		<script src="js/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="assets/plugins/switchery/switchery.min.js"></script>
		<script src="assets/js/ecaps.min.js"></script>	
		<script type="text/javascript">
			var row = [{
					"name": 2,
					"price": 2,
					"sum": 2,
					"number": "4"
				},
				{
					"name": 2,
					"price": 2,
					"sum": 2,
					"number": "4"
				},
				{
					"name": 2,
					"price": 2,
					"sum": 2,
					"number": "4"
				},
				{
					"name": 2,
					"price": 2,
					"sum": 2,
					"number": "4"
				},
				{
					"name": 2,
					"price": 2,
					"sum": 2,
					"number": "4"
				},
				{
					"name": 2,
					"price": 2,
					"sum": 2,
					"number": "4"
				},
				{
					"name": 2,
					"price": 2,
					"sum": 2,
					"number": "4"
				},
			];
			$(function(){
			$('#example').bootstrapTable({
				method: 'post',
				data: row,
				//	url:"../BookServlet",
				cache: false,
				contentType: 'application/x-www-form-urlencoded',
				striped: true,
				dataType: "json",
				pagination: true,
				showPaginationSwitch: false,
				pageSize: 4,
				pageNumber: 1,
				sortable: true,
				sortOrder: "asc",
				pageList: [2, 5, 10],
				search: false,
				sidePagination: 'client',
				silent: true,
				toolbarAlign: 'right',
				columns: [{
					field: null,
					checkbox: true,
				}, {
					field: 'name',
					align: 'center',
				}, {
					field: 'price',
					align: 'center',
				}, {
					field: 'sum',
					align: 'center',
				}, {
					field: 'number',
					align: 'center',
				}, {
					field: 'op',
					align: 'center',
					valign: 'center',
					events: window.operateEvents,
					formatter: function(value, row, index) {
						var html = [
							"<button type='button' class='btn btn-info btn-xs btnEdit' onclick='goEdit()'><i class='fa fa-pencil'></i>修改</button>",
							"<button type='button' class='btn btn-danger btn-xs btnDel' onclick='del()'><i class='fa fa-trash'>删除</button>",
						];
						return html.join('');
					}
				}]
			});
			})
		</script>
		<!--
	<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>
-->
	</body>
</html>
